/*
 * 最新单品区域模块
 * @Author: ljb
 * @Date: 2018-11-15 17:20:45
 * @Last Modified by: kanglin
 * @Last Modified time: 2019-01-30 14:47:02
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

	@import '~src/assets/css/common.less';

	/*推荐商品*/
	.recommend-product-area {
		width: 100%;
		.title-area {
			padding: 0 40*@rem-per-px;
		}
		.product-lists {
			padding: 0 12*@rem-per-px 12*@rem-per-px 14*@rem-per-px;
			white-space: nowrap;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			.product {
				vertical-align: top;
				margin-right: 28*@rem-per-px;
			}
		}
	}
	/*推荐商品 END*/

</style>
<template>
	<!-- 推荐商品区域 -->
	<section
		v-if="getProducts && getProducts.length > 0"
		class="recommend-product-area white-bg">
		<div class="title-area">
			<blockTitle
				:show-icon="true"
				:text="$t('home.recommend_product')"
				@click.native="$emit('search',{ search_type: code, layout_module_id: layoutModuleId, title: $t('home.recommend_product') })"/>
		</div>

		<div class="product-lists">
			<recommendProduct
				v-for="product in getProducts"
				:key="product.product_id"
				:product-image="product.product_image"
				:product-title="product.product_name"
				:product-price="product.currency_settle_price || product.price"
				:line-price="lineThroughPrice(product)"
				:left-symbol="product.symbol_left"
				:right-symbol="product.symbol_right"
				class="product"
				@click.native="handleApp('productDetail', JSON.stringify({id: product.product_id}))"/>
		</div>
	</section>
</template>

<script>

import blockTitle from 'src/views/component/title';
import recommendProduct from 'src/views/component/recommend-product';
import { appHandle } from 'src/views/mixins/appHandle';


/**
 * 最新单品区域模块
 * @vue-prop {Object} [setting={}] 后端返回的组件数据
 * @vue-prop {String} code 组件名称
 * @vue-prop {Number} layoutModuleId 组件ID
 * @vue-computed {Array} getProducts 商品列表
 */
export default {
	name: 'RecommendModule',
	components: {
		blockTitle,
		recommendProduct,
	},
	mixins: [appHandle],
	props: {
		setting: {
			type: Object,
			default() {
				return {};
			},
		},
		code: {
			type: String,
			required: true,
		},
		layoutModuleId: {
			type: Number,
			required: true,
		},
	},
	data() {
		return {

		};
	},
	computed: {
		getProducts() {
			return this.setting ? this.setting.recommend_products : [];
		},
	},
	methods: {
		/**
		 * 实际价格小于原价显示划线价否则不显示
		 * @parms {string} currency_settle_price 实际价格
		 * @parms {string} price 原价价格
		 */
		lineThroughPrice({ currency_settle_price, price }) {
			if (parseInt(currency_settle_price, 10) < parseInt(price, 10)) {
				return price;
			}
			return '';
		},
	},
};
</script>
